<template>
  <el-card shadow="never"
           body-style="padding: 22px;">
    <div class="ele-page-header"
         style="margin-bottom: 20px">
      <div class="ele-page-title">定时任务配置</div>
      <!-- <div class="ele-page-desc"> 用于前端平台相关信息配置。 </div> -->
      <div class="ele-page-desc"> 定时任务 shell 脚本 </div>

    </div>

    <div v-for="(item,index) in notificationTemplateList"
         :key="index"
         class="note">
      <el-alert :title="item.name"
                style="height: 100px"
                class="ele-alert-border"
                type="warning"
                :closable="false">
        <template #default>
          <div style="font-size: 14px">
            <div style="margin-bottom: 8px">
              <span style="font-weight: 700">{{ item.link }} <span class="demo-icon-tip"
                      style="color:#1890ff ;"
                      @click="copyAddress(item.link)">点击复制</span></span>
              <br />
            </div>
            <div style="margin-bottom: 8px">
              <span style="font-weight: 700">描述:{{ item.desc }}</span>
              <br />
            </div>
          </div>
        </template>
      </el-alert>
    </div>

    <!-- 图片预览 -->
    <el-image-viewer v-if="showViewer"
                     style="z-index: 9999"
                     :on-close="closeViewer"
                     :url-list="imgViewArr" />
  </el-card>
</template>
  
  <script>
import ElImageViewer from 'element-ui/packages/image/src/image-viewer';
import { timing } from '@/api/config/index'
export default {
  components: { ElImageViewer },
  data () {
    return {
      dialogFormVisible: false,
      currentIndex: 0,
      showViewer: false,
      notificationTemplateList: [],
      orderStatusArr: [
        {
          value: '模版通知',
          id: 1
        },

        {
          value: '短信通知',
          id: 2
        },
      ],
      form: {
        template_name: '',
        tid: ''
      },
      id: ''
    }
  },
  mounted () {
    this.init();
  },
  computed: {
    // 是否开启响应式布局
    styleResponsive () {
      return this.$store.state.theme.styleResponsive;
    }
  },
  methods: {
    // 复制链接
    copyAddress (val) {
      var copyInput = document.createElement("input"); // 创建元素
      //val是要复制的内容
      copyInput.setAttribute("value", val);
      document.body.appendChild(copyInput);
      copyInput.select();
      try {
        var copyed = document.execCommand("copy");
        if (copyed) {
          document.body.removeChild(copyInput);

          this.$message.success("复制成功");
        }
      } catch {
        this.$message.error("复制失败，请检查浏览器兼容");
      }
    },
    async init () {
      const res = await timing()
      console.log(res)
      if (res.code == 0) {
        this.notificationTemplateList = res.data.list
      }
    },



  }
}
  </script>
  
  <style lang="less" scoped>
.selectTime {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  .timeTab {
    display: flex;
    align-items: center;
    margin-right: 20px;
    li {
      list-style-type: none;
      display: block;
      width: 110px;
      height: 38px;
      line-height: 38px;
      text-align: center;
      border: 1px solid #d9d9d9;
      border-radius: 10px;
    }
    .active {
      width: 110px;
      height: 38px;
      border-radius: 6px;
      background: #1890ff;
      color: #fff;
      text-align: center;
      line-height: 38px;
    }
  }
  .orderStatus {
    min-width: 77px;
    height: 34px;
    font-size: 14px;
    line-height: 34px;
  }
  .filterDate {
    text-align: center;
    line-height: 34px;
    width: 90px;
    height: 34px;
    font-size: 14px;
    border-radius: 2px 0px 0px 2px;
    border: 1px solid #d9d9d9;
    border-right: none;
  }
  .ele-fluid {
    width: 300px !important;
  }
}

/deep/.ele-bottom-tool-actions {
  text-align: center;
}
.note {
  margin-bottom: 20px;
}
/deep/ .el-input--medium {
  width: 600px;
}
/deep/ .el-select {
}
/deep/ .el-form-item {
  margin-bottom: 0;
}
/* 表格行拖拽按下去样式 */
.ele-table tr.sortable-chosen {
  background: hsla(0, 0%, 60%, 0.1);
}
</style>
  